﻿﻿
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="/js/lottery/jquery-latest.js"></script>
    <script type="text/javascript" src="/bootstrap/jquery/jquery-2.1.3.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>滴滴打人抽奖活动</title>

    <style>
        #lottery {
            width: 330px;
            height: 330px;
            margin: 0px auto;
            border: 4px solid #ba1809;
        }

        #lottery table {
            background-color: yellow;
        }

        #lottery table td {
            position: relative;
            width: 110px;
            height: 110px;
            text-align: center;
            color: #333;
            font-index: -999
        }

        #lottery table td img {
            display: block;
            width: 110px;
            height: 110px;
        }

        #lottery table td a {
            width: 110px;
            height: 110px;
            display: block;
            text-decoration: none;
            background: url(/image/lottery/lottery1.jpg) no-repeat top center;
        }

       /* #lottery table td a:hover {
            background-image: url(/image/lottery/lottery2.jpg) no-repeat top center;
        }*/

        #lottery table td.active .mask {
            display: block;
        }

        .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(252, 211, 4, 0.5);
            display: none;
        }
    </style>

</head>
<body>
<br>
<br>
<br>
<div id="lottery" align="justify">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td class="lottery-unit lottery-unit-0"><img src="image/lottery/gift0.jpg">
                <div class="mask"></div>
            </td>
            <td class="lottery-unit lottery-unit-1"><img src="image/lottery/gift1.jpg">
                <div class="mask"></div>
            </td>
            <td class="lottery-unit lottery-unit-2"><img src="image/lottery/gift2.jpg">
                <div class="mask"></div>
            </td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-7"><img src="image/lottery/gift7.jpg">
                <div class="mask"></div>
            </td>
            <td>
                <a href="#"></a>
            </td>
            <td class="lottery-unit lottery-unit-3"><img src="image/lottery/gift3.jpg">
            </td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-6"><img src="image/lottery/gift6.jpg">
                <div class="mask"></div>
            </td>
            <td class="lottery-unit lottery-unit-5"><img src="image/lottery/gift5.jpg">
                <div class="mask"></div>
            </td>
            <td class="lottery-unit lottery-unit-4"><img src="image/lottery/gift4.jpg">
                <div class="mask"></div>
            </td>
        </tr>
    </table>
</div>

<div class="col-xs-12">
    <p align="center">活动最终解释权由本公司<font color="#a52a2a">滴滴打人</font>所有</p>
</div>


<script type="text/javascript">
    var lottery = {
        index: -1,    //当前转动到哪个位置，起点位置
        count: 0,    //总共有多少个位置
        timer: 0,    //setTimeout的ID，用clearTimeout清除
        speed: 20,    //初始转动速度
        times: 0,    //转动次数
        cycle: 50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize: -1,    //中奖位置
        init: function (id) {
            if ($("#" + id).find(".lottery-unit").length > 0) {
                $lottery = $("#" + id);
                $units = $lottery.find(".lottery-unit");
                this.obj = $lottery;
                this.count = $units.length;
                $lottery.find(".lottery-unit-" + this.index).addClass("active");
            }
            ;
        },
        roll: function () {
            var index = this.index;
            var count = this.count;
            var lottery = this.obj;
            $(lottery).find(".lottery-unit-" + index).removeClass("active");
            index += 1;
            if (index > count - 1) {
                index = 0;
            }
            ;
            $(lottery).find(".lottery-unit-" + index).addClass("active");
            this.index = index;
            return false;
        },
        stop: function (index) {
            this.prize = index;
            return false;
        }
    };

    function roll() {
        lottery.times += 1;
        lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
        if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
            clearTimeout(lottery.timer);
            if (lottery.prize == 1 || lottery.prize == 7 || lottery.prize == 4 || lottery.prize == 6) {
                alert('谢谢参与~')
            } else {
                if (lottery.prize == 0) {
                    alert("恭喜获得：八折优惠服务一次");
                } else if (lottery.prize == 2) {
                    alert("恭喜获得：五折优惠服务一次");
                } else if (lottery.prize == 3) {
                    alert("恭喜获得：全套免费服务体验一次");
                } else if (lottery.prize == 5) {
                    alert("恭喜获得：九折优惠服务一次");
                }
                $.get("/saveCoupon", {couponId: lottery.prize}, function (data) {

                })
            }

            lottery.prize = -1;
            lottery.times = 0;
            click = false;
        } else {
            if (lottery.times < lottery.cycle) {
                lottery.speed -= 10;
            } else if (lottery.times == lottery.cycle) {
                var index = Math.random() * (lottery.count) | 0;//中奖物品通过一个随机数生成
                lottery.prize = index;
            } else {
                if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                    lottery.speed += 110;
                } else {
                    lottery.speed += 20;
                }
            }
            if (lottery.speed < 40) {
                lottery.speed = 40;
            }
            ;
            //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
            lottery.timer = setTimeout(roll, lottery.speed);//循环调用
        }

        return false;
    }

    var click = false;

    window.onload = function () {
        lottery.init('lottery');
        $("#lottery a").click(function () {
            if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
                return false;
            } else {
                lottery.speed = 100;
                roll();    //转圈过程不响应click事件，会将click置为false
                click = true; //一次抽奖完成后，设置click为true，可继续抽奖
                return false;
            }
        });
    };
</script>

</body>
</html>
